<template>
  <div>
    <content-show :list="dataList" @refreshData="getData()"></content-show>
    <!-- 关注者 -->
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :hide-on-single-page="true"
        :current-page="query.pageNum"
        :page-size="query.pageSize"
        :total="pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import ContentShow from "../contentshow/ContentShow";
import { findAttentiondata } from "../../api/cares";
import { timeQuantum } from "../../util/timeQuantum";
export default {
  components: { ContentShow },
  name: "Cares",
  created() {
    this.getData();
  },
  data() {
    return {
      dataList: {},
      pageTotal: 0,
      query: {
        pageNum: 1,
        pageSize: 5,
        uid: localStorage.getItem("uid"),
      },
    };
  },
  methods: {
    getData() {
      findAttentiondata(this.query).then((res) => {
        if (res.code == 200) {
          // 分页数据
          this.pageTotal = res.data.total;

          let list = res.data.list;
          var d = document.createElement("div");
          for (let index = 0; index < list.length; index++) {
          // 获取话题内容的文本（用来简略展示）
            d.innerHTML = list[index].content;
            let text = d.innerText
            if (text.length > 80) {
              list[index].text = text.slice(0,80) + "...";
            } else {
              list[index].text = text.slice(0,40) + "...";
            }
            // 内容展示
            list[index].tag = false;
            // 评论展示
            list[index].disShow = true

            // 修改时间的展示方式
            list[index].createtime = timeQuantum(
              list[index].createtime
            );
          }

          this.dataList = list
          console.log(this.dataList);
        }
      });
    },
    handlePageChange(val) {
      this.$set(this.query, "pageNum", val);
      this.getData();
    },
  },
};
</script>

<style scoped>
.pagination {
  margin: 0px auto;
  padding: 20px 0px;
  text-align: center;
  background-color: #fff;
}
</style>
